    @mixin color($r, $g, $b) {
      color: unquote('#'+$r+$g+$b);
    }

    @mixin rgba($r, $g, $b, $a:1) {
      color: unquote("rgba("+$r+','+$g+","+$b+","+$a +")");
    }

    @mixin bg_color($r, $g, $b) {
      background-color: unquote( '#'+$r+$g+$b);
    }

    @mixin bg_rgba($r, $g, $b, $a:1) {
      background-color: unquote("rgba("+$r+','+$g+","+$b+","+$a +")");
    }

    @mixin ht($ht) {
      height: $ht+px;
    }

    @mixin ht_rem($ht) {
      height: $ht+rem;
    }

    @mixin lh($ht) {
      line-height: $ht+px;
    }

    @mixin lh_rem($ht) {
      line-height: $ht+rem;
    }

    @mixin fs($fs) {
      font-size: $fs+px;
    }

    @mixin fs_rem($fs) {
      font-size: $fs+rem;
    }

    @mixin fs_pct($fs) {
      font-size: $fs+%;
    }

    @mixin flex {
      display: flex;
    }

    @mixin flex-r {
      flex-direction: row;
    }

    @mixin flex-v {
      flex-direction: column;
    }

    @mixin flex-c {
      justify-content: center;
    }

    @mixin flex-b {
      justify-content: space-between;
    }

    @mixin flex-a {
      justify-content: space-around;
    }

    @mixin flex-s {
      justify-content: flex-start;
    }

    @mixin flex-e {
      justify-content: flex-end;
    }

    @mixin flex-vc {
      align-content: center;
    }

    @mixin flex-vs {
      align-items: flex-start;
    }

    @mixin flex-ve {
      align-items: flex-end;
    }

    @mixin hide {
      display: none;
    }

    @mixin mar1($t1) {
      margin: $t1+px;
    }

    @mixin mar2($t1, $t2) {
      margin: $t1+px $t2+px;
    }

    @mixin mar3($t1, $t2, $t3) {
      margin: $t1+px $t2+px $t3+px;
    }

    @mixin mar4($t1, $t2, $t3, $t4) {
      margin: $t1+px $t2+px $t3+px $t4+px;
    }

    @mixin mar_rem1($t1) {
      margin: $t1+rem;
    }

    @mixin mar_rem2($t1, $t2) {
      margin: $t1+rem $t2+rem;
    }

    @mixin mar_rem3($t1, $t2, $t3) {
      margin: $t1+rem $t2+rem $t3+rem;
    }

    @mixin mar_rem4($t1, $t2, $t3, $t4) {
      margin: $t1+rem $t2+rem $t3+rem $t4+rem;
    }

    @mixin pad1($t1) {
      padding: $t1+px;
    }

    @mixin pad2($t1, $t2) {
      padding: $t1+px $t2+px;
    }

    @mixin pad3($t1, $t2, $t3) {
      padding: $t1+px $t2+px $t3+px;
    }

    @mixin pad4($t1, $t2, $t3, $t4) {
      padding: $t1+px $t2+px $t3+px $t4+px;
    }

    @mixin pad_rem1($t1) {
      padding: $t1+rem;
    }

    @mixin pad_rem2($t1, $t2) {
      padding: $t1+rem $t2+rem;
    }

    @mixin pad_rem3($t1, $t2, $t3) {
      padding: $t1+rem $t2+rem $t3+rem;
    }

    @mixin pad_rem4($t1, $t2, $t3, $t4) {
      padding: $t1+rem $t2+rem $t3+rem $t4+rem;
    }

    @for $i from 0 through 20 {
      .w#{$i * 5} {
        width: $i *5 /100 * 100%;
        margin: 0 auto;
      }
    }

    @for $i from 0 through 10 {
      .bd_r_#{$i} {
        border-radius: $i+px
      }
    }

    @for $i from 0 through 10 {
      .bd_r_#{$i}_rem {
        border-radius: $i+rem;
        overflow: hidden;
      }
    }

    .bd_r50 {
      border-radius: 50%;
    }

    @for $i from 0 through 9 {
      .ht#{$i} {
        @include ht_rem($i);
      }
      .ht#{$i}5 {
        @include ht_rem($i+.5);
      }
    }

    @for $i from 0 through 9 {
      .lh#{$i} {
        @include lh_rem($i);
      }
      .lh#{$i}5 {
        @include lh_rem($i+.5);
      }
    }

    @for $i from 0 through 5 {
      .mar#{$i} {
        @include mar_rem1($i);
      }
      .mar#{$i}5 {
        @include mar_rem1($i+.5);
      }
    }

    @for $i from 0 through 5 {
      @for $j from 0 through 5 {
        .mar_#{$i}_#{$j} {
          @include mar_rem2($i, $j);
        }
      }
    }

    @for $i from 0 through 5 {
      .mar_l_#{$i} {
        margin-left: $i + rem;
      }
      .mar_l_#{$i}5 {
        margin-left: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .mar_r_#{$i} {
        margin-right: $i + rem;
      }
      .mar_r_#{$i}5 {
        margin-right: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .mar_t_#{$i} {
        margin-top: $i + rem;
      }
      .mar_t_#{$i}5 {
        margin-top: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .mar_b_#{$i} {
        margin-bottom: $i + rem;
      }
      .mar_b_#{$i}5 {
        margin-bottom: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .pad#{$i} {
        @include pad_rem1($i);
      }
      .pad#{$i}5 {
        @include pad_rem1($i+.5);
      }
    }

    @for $i from 0 through 5 {
      .pad_l_#{$i} {
        padding-left: $i + rem;
      }
      .pad_l_#{$i}5 {
        padding-left: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .pad_r_#{$i} {
        padding-right: $i + rem;
      }
      .pad_r_#{$i}5 {
        padding-right: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .pad_t_#{$i} {
        padding-top: $i + rem;
      }
      .pad_t_#{$i}5 {
        padding-top: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      .pad_b_#{$i} {
        padding-bottom: $i + rem;
      }
      .pad_b_#{$i}5 {
        padding-bottom: $i+.5 + rem;
      }
    }

    @for $i from 0 through 5 {
      @for $j from 0 through 5 {
        .pad_#{$i}_#{$j} {
          @include pad_rem2($i, $j);
        }
      }
    }
    @for $i from 5 through 20 {
       .fs#{$i}0{
         font-size:#{$i}0%;
       }
      }

    .flex {
      @include flex;
    }

    .flex-b {
      @include flex-b;
    }

    .flex-c {
      @include flex-c;
    }

    .flex-s {
      @include flex-s;
    }

    .flex-e {
      @include flex-e;
    }

    .flex-r {
      @include flex-r;
    }

    .flex-a {
      @include flex-a;
    }

    .flex-v {
      @include flex-v;
    }

    .fixed {
      position: fixed;
    }

    .fixed_top {
      @extend .fixed;
      top: 0;
    }

    .fixed_bot {
      @extend .fixed;
      bottom: 0;
    }

    .tc {
      text-align: center;
    }

    .tr {
      text-align: right;
    }

    .tl {
      text-align: left;
    }

    .shadow {
      box-shadow: 3px 3px 10px #999;
    }

    .bold {
      font-weight: bold;
    }

    .bg_white {
      @include bg_color('f', 'f', 'f');
    }

    p,
    div,
    section,
    article,
    body,
    header,
    footer,
    nav,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    li {
      display: block;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    h1 {
      font-size: 2rem;
    }

    li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      color: #454545;
      text-decoration: none;
    }

    input,
    textarea,
    select {
      border: 0;
      outline: 0;
    }

    .header_fixed{
        position: fixed;
        top: 0;
        z-index: 10000;
    }
    .footer_fixed{
        position: fixed;
        bottom: 0;
        z-index: 10000;
    }
html{
 font-size:  14px;
}
